/**
 * 有个需求：
 *    用户名 输入框
 *    密码   输入框
 *    登录按钮  console.log(用户名：xxx, 密码： yyy)
 *
 *    不用将 用户名与密码存入 state
 *
 *    React.createRef
 *    第一种字符串形式的ref
 *    第二中回调函数形式的ref
 */
import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  usernameRef = React.createRef();
  passwordRef = React.createRef();

  handleLogin = (event) => {
    // 阻止默认行为
    event.preventDefault();

    // 取值
    const username = this.usernameRef.current.value;
    const password = this.passwordRef.current.value;
    // console.log(username);

    console.log(`用户名：${username} , 密码：${password}`);
  };

  render() {
    console.log("render");
    const { usernameRef, passwordRef } = this;
    return (
      <div>
        <h1>App</h1>

        <form>
          <label>
            <span>用户名</span>
            <input ref={usernameRef} type="text" />
          </label>

          <br />

          <label>
            <span>密码</span>
            <input ref={passwordRef} type="password" />
          </label>

          <button onClick={this.handleLogin}>登录</button>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
